<template>
    <div class="inventory">
        <div class="left">
            <el-form :model="formData" :inline="true" size="small">
                 <el-form-item label="物品类型">
                    <el-select clearable  placeholder="请选择物品类型" v-model="formData.type">
                        <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="关键字">
                    <el-input clearable  v-model="formData.name"></el-input>
                </el-form-item>
                <el-button @click="searchHandler" size="small" type="text">搜索</el-button>
            </el-form>
        </div>
        <div class="right">
            <el-button @click="toAddHandler" size="small" type="primary">入库</el-button>
            <el-button size="small" type="primary">批量入库</el-button>
        </div>
        <div class="table">
            <el-table :data="inventory" border style="width: 100%">
                <el-table-column fixed prop="id" label="序号" width="50" align="center"></el-table-column>
                <el-table-column fixed prop="name" label="物品名称" width="200" align="center"></el-table-column>
                <el-table-column prop="code" label="物品编码" width="200" align="center"></el-table-column>
                <el-table-column prop="brand" label="品牌" width="150" align="center"></el-table-column>
                <el-table-column prop="specification" label="规格型号" width="150" align="center"></el-table-column>
                <el-table-column prop="type" label="类型" width="150" align="center"></el-table-column>
                <el-table-column prop="price" label="单价" width="150" align="center"></el-table-column>
                <el-table-column prop="num" label="总数量" width="150" align="center"></el-table-column>
                <el-table-column prop="numRemain" label="剩余数量" width="150" align="center"></el-table-column>
                <el-table-column prop="picture" label="图片" width="200" align="center">
                    <template slot-scope="{row}">
                        <img :src="row.picture" alt="图片丢失" style="width:50px;height:50px">
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button @click="delHandler(scope.row.id)" type="text" size="small">删除</el-button>
                        <el-button @click="editHandler(scope.row)" type="text" size="small">修改</el-button>
                        <el-button @click="detailsHandler(scope.row)" type="text" size="small">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 模态框 -->
        <el-dialog :title="title" :visible.sync="visible">
            <el-form :model="form" :inline="true" size="small">
                <el-input v-model="form.id" style="display:none"></el-input>
                <el-form-item label="物品编号" :label-width="formLabelWidth">
                    <el-input v-model="form.code"></el-input>
                </el-form-item>
                <el-form-item label="物品类型" :label-width="formLabelWidth">
                    <el-select v-model="form.type" placeholder="请选择活动区域">
                        <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="物品名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="规格型号" :label-width="formLabelWidth">
                    <el-input v-model="form.specification"></el-input>
                </el-form-item>
                <el-form-item label="品牌" :label-width="formLabelWidth">
                    <el-input v-model="form.brand" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="单价" :label-width="formLabelWidth">
                    <el-input v-model="form.price"></el-input>
                </el-form-item>
                <el-form-item label="总数量" :label-width="formLabelWidth">
                    <el-input v-model="form.num"></el-input>
                </el-form-item>
                <el-form-item label="经办人" :label-width="formLabelWidth">
                    <el-input placeholder="王总" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="图片" :label-width="formLabelWidth">
                    <el-upload
                        class="upload-demo"
                        action="http://121.199.29.84:8001/file/upload"
                        :on-success="successHandler"
                        list-type="picture"
                        :limit='limit'>
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button type="primary" @click="toSave">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 详情弹框 -->
        <el-dialog
            title="详情页面"
            :visible.sync="detailsVisible"
            width="50%">
            <el-row>
                <el-col :span="16">
                    <div class="detail_name">物品编码：<span>{{details.code}}</span></div>
                    <div class="detail_name">物品名称：<span>{{details.name}}</span></div>
                    <div class="detail_name">规格参数：<span>{{details.specification}}</span></div>
                    <div class="detail_name">品牌：<span>{{details.brand}}</span></div>
                    <div class="detail_name">类型：<span>{{details.type}}</span></div>
                    <div class="detail_name">单价：<span>{{details.price}}</span></div>
                    <div class="detail_name">数量：<span>{{details.num}}</span></div>
                </el-col>
                <el-col :span="8">
                    <img :src="details.picture" alt="图片找不到了" style="width:200px;height:200px;">
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="detailsVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
        <!-- 分页 -->
        <el-pagination
            @current-change="handleCurrentChange"
            :page-size="5"
            layout="prev, pager, next"
            :total="this.total">
        </el-pagination>
    </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
export default {
    data() {
        return {
            formData:{},
            page:1,
            pageSize:5,
            visible:false,
            form:{},
            title:'',
            formLabelWidth:'100px',
            limit:1,
            detailsVisible:false,
            details:{}
        }
    },
    computed: {
        ...mapState('items',['inventory','total','types'])
    },
    created(){
        const payload = {
            page:1,
            pageSize:5
        }
        this.pageQueryInventory(payload)
        this.findAllTypes()
    },
    methods:{
        ...mapActions('items',['pageQueryInventory','deleteById','findAllTypes','saveOrUpdate']),
        // 分页函数
        handleCurrentChange(page) {
            const payload = {
                page : page,
                pageSize : this.pageSize
            }
            this.pageQueryInventory(payload)
        },
        // 删除事件
        delHandler(id){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteById(id).then((res) => {
                    if(res.data.status === 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        const payload = {
                            page : this.page,
                            pageSize : this.pageSize
                        }
                        this.pageQueryInventory(payload)
                    } else {
                        this.$message({
                            type: 'error',
                            message: '删除失败'
                        });  
                    }
                }).catch((res) => {
                    this.$message({
                        type: 'error',
                        message: '后台接口异常'
                    }); 
                })
            })
            
        },
        // 打开模态框
        toAddHandler() {
            this.title = '新增物品信息'
            this.form = {}
            this.visible = true
        },
        // 保存事件
        toSave() {
            this.saveOrUpdate(this.form).then((res) => {
                if(res.data.status === 200) {
                    this.$message({
                        type: 'success',
                        message: '更新成功!'
                    });
                    const payload = {
                        page : this.page,
                        pageSize : this.pageSize
                    }
                    this.pageQueryInventory(payload)
                    this.visible = false
                } else {
                    this.$message({
                        type: 'error',
                        message: '更新失败'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'error',
                    message: '后台接口异常'
                }); 
            })
        },
        // 修改事件
        editHandler(row) {
            this.form = {}
            this.form = row
            this.title = '修改物品信息'
            this.visible = true
        },
        // 搜索事件
        searchHandler() {
            const payload = {
                page:this.page,
                pageSize:this.pageSize,
                type:this.formData.type,
                name:this.formData.name
            }
            this.pageQueryInventory(payload)
        },
        // 图片上传成功的回调
        successHandler(response, file, fileList) {
            this.form.picture = 'http://121.199.29.84:8888/' + response.data.groupname + '/' + response.data.id
        },
        // 打开详情页面
        detailsHandler(row) {
            this.details = {}
            this.details = row
            this.detailsVisible = true
        }
    }
}
</script>
<style scoped>
    .left {
        float: left;
    }
    .right {
        float: right;
    }
    .detail_name {
        font-size: 18px;
        font-weight: bold;
        color: rgb(83, 83, 83);
        text-align: left;
        height: 30px;
        line-height: 30px;
    }
</style>